<div class="wrapper wrapper-content animated fadeInRight" style="padding-bottom: 0px">
    <div class="row">
        <div class="col-lg-3">
            <div class="widget style1 lazur-bg">
                <div class="row">
                    <div class="col-xs-4">
                        <i class="fa fa-warning fa-5x"></i>
                    </div>
                    <div class="col-xs-8 text-right">
                        <span> 最近一个月水压报警次数 </span>
                        <h2 class="font-bold">${month_alarm_event}</h2>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="widget style1 red-bg">
                <div class="row">
                    <div class="col-xs-4">
                        <i class="fa fa-bell fa-5x"></i>
                    </div>
                    <div class="col-xs-8 text-right">
                        <span> 水压未处理报警事件 </span>
                        <h2 class="font-bold">${none_confirm_alarm_event}</h2>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="widget style1 yellow-bg">
                <div class="row">
                    <div class="col-xs-4">
                        <i class="fa fa-rss fa-5x"></i>
                    </div>
                    <div class="col-xs-8 text-right">
                        <span> 动态监测报警数 </span>
                        <h2 class="font-bold">N/A</h2>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="widget style1 navy-bg">
                <div class="row">
                    <div class="col-xs-4">
                        <i class="fa fa-cog fa-5x"></i>
                    </div>
                    <div class="col-xs-8 text-right">
                        <span> 设备异常数量 </span>
                        <h2 class="font-bold">N/A</h2>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
<#if (deviceList ? size == 0)>
    <div class="col-md-12">
        <div class="widget red-bg p-lg text-center">
            <div class="m-b-lg">
                <i class="fa fa-exclamation-circle fa-4x" style="margin-bottom: 20px"></i>
                <h1 class="font-bold no-margins">
                    请先添加设备。
                </h1>
            </div>
        </div>
    </div>
</#if>
<#list deviceList as item>
    <#if (item_index + 1) % 4 == 1>
        <div class="row">
    </#if>

    <div class="col-md-3">
        <div class="ibox">
            <div class="ibox-content product-box">

                <div class="product-imitation">
                    <img src= ${item.picture} height="100%" width="95%" alt="水压主机图片加载失败！"/>
                </div>
                <div class="product-desc">
                       <#if item.online == 0>
                            <span class="product-price-offLine"> 离线 </span>
                       </#if>
                        <#if item.online != 0>
                            <span class="product-price"> 在线 </span>
                        </#if>
                    <small class="text-muted">IP:${item.device_ip}:${item.port}</small>
                    <a href="#" class="product-name">主机: ${item.device_name} </a>

                    <div class="small m-t-xs">
                        描述：${item.detail}
                    </div>
                    <div class="m-t text-right">
                        <a href="#" class="btn btn-xs btn-outline btn-primary"> 详情 <i class="fa fa-long-arrow-right"></i> </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <#if (item_index + 1) % 4 == 0 || !item_has_next>
        </div>
    </#if>
</#list>
</div>